<template>
  <div class="main">
    <div class="order-payment">
      <div class="flexs">
        <div class="pay-success">
          <i class="el-icon-success" />
        </div>
        <div>订单支付成功</div>
      </div>
      <div class="pay-tips">开始添加楼栋，管理你的业务</div>
    </div>
    <el-row :gutter="20">
      <el-col
        v-for="(i, num) in acList"
        :key="i"
        :span="3"
        class="pay-type margin-right-sm"
      >
        <div class="itm-type" @click="changetype(num)">
          <svg-icon :icon-class="i.icon" fill="#fff" />
          <span class="type-titles margin-left-xs">{{ i.name }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Payment',
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    price: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      typenum: 0,
      current: 2,
      acList: [
        {
          name: '操作手册',
          icon: 'diandi_subscription-help-index'
        },
        {
          name: '房态管理',
          icon: 'place-Hotel-Advertising'
        }
      ],
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      imgUrl: ''
    }
  },
  mounted() {
    this.getcreatePay()
  },
  methods: {
    handlepay() {
      this.$emit('handlepay', this.current)
    },
    changetype(num) {
      const that = this

      this.typenum = num
      if (num === 0) {
        that.$store.dispatch('settings/setMenuType', 'diandi_place')
      } else if (num === 1) {
        that.$router.push({
          name: 'service-success',
          params: {
            order_id: that.detail.order_id
          }
        })
      }
    },
    handlecreatePay() {
      const that = this
      that.$router.push({
        name: 'service-success',
        params: {
          order_id: that.detail.order_id
        }
      })
    }
  }
}
</script>
<style type="text/css">
.order-payment {
  background-color: #f5f5f5;
  margin: 40px 0 25px;
  height: 91px;
  font-size: 13px;
  align-items: center;
  display: grid;
}
.pay-success {
  color: #1ab97e;
  margin: 0 10px 0 32px;
}
.flexs {
  display: flex;
}
.wx-pay {
  display: flex;
  align-items: center;
  margin-top: 48px;
}
.pay-tips {
  margin-left: 32px;
  color: #c8c8c8;
  font-size: 11px;
}
.store-detail {
  font-size: 13px;
  color: #4d4d4d;
}
.pay-type {
  width: 236px;
  height: 57px;
  border-radius: 4px;
  color: #676767;
  font-size: 13px;
  border: 1px solid #c7c7c7;
}
.itm-type {
  width: 236px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #09bb07;
}
.typeactive {
  border: 1px solid #5357cb;
}
.type-titles {
  color: #676767;
  font-size: 13px;
}
.pay-bg {
  width: 507px;
  height: 173px;
  background: #f5f5f5;
  margin-top: 48px;
  font-size: 13px;
  color: #676767;
  padding: 14px 32px;
}
.colors {
  color: #f91010;
}
</style>
